<template>
  <div class="fire-container">
    <div class="fire-main">
      <div class="infos">
        <div>消防设施</div>
        <div>
          <!-- <el-icon v-if="viewShow" style="cursor: pointer" @click="viewShowClick">
            <View />
          </el-icon> -->
          <!-- <el-icon v-if="hideShow" style="cursor: pointer" @click="hideShowClick"><Hide /></el-icon> -->
        </div>
      </div>
      <div class="fire-icon">
        <div
          v-for="item in xfssData"
          :key="item.orderId"
          class="fire-icon-box"
          @click="fireClick(item)"
        >
          <div class="fire-icon-con">
            <img :src="item.iconUrl" alt="" />
          </div>
          <div style="text-align: center; margin-top: 2px">{{ item.menuName }}</div>
        </div>
        <fireWaterSource
          v-if="showWater"
          ref="refFireWaterSource"
          :water-data="waterData"
          class="watersource"
          @closeClick="closeClick"
        ></fireWaterSource>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryMenuSsInfo } from '@/service/api'
import fireWaterSource from './fireWaterSource/index.vue'
import { featureClick, clearEditState } from '@/utils/common/index'
import { useChemicalStore } from '@/store'
const chemicalStore = useChemicalStore()

const xfssData = ref([] as any)
const refFireWaterSource = ref()
const waterData = ref({})
const showWater = ref(false)
const viewShow = ref(true)
const hideShow = ref(false)
function viewShowClick() {
  viewShow.value = false
  hideShow.value = true
}
function hideShowClick() {
  viewShow.value = true
  hideShow.value = false
}
function fireClick(item: any) {
  showWater.value = true
  waterData.value = item
  nextTick(() => {
    refFireWaterSource.value.activeReset()
    refFireWaterSource.value.queryxfssDdList()

    clearEditState() //清除标注状态

    //记录弹窗类型
    chemicalStore.fireFightingFacilities.dialogType = 'add'

    //消防水管网和消防泡沫管网 不需要上图
    if (item.menuName === '消防水管网' || item.menuName === '消防泡沫管网') {
      refFireWaterSource.value.showkdkfk()
      return
    }

    const overlayArr = ['消防泵房', '泡沫站', '消防水源', '天然水源取水点']
    //标牌要素
    if (overlayArr.includes(item.menuName)) {
      featureClick({
        MapFactorType: 'overlay',
        MapFactorName: item.menuName,
        bzlx: item.menuCode,
        attribute: { parentId: item.parentId },
      })
    }
    //点图标要素
    else {
      featureClick({
        MapFactorType: 'point',
        MapFactorName: item.menuName,
        bzlx: item.menuCode,
        attribute: { parentId: item.parentId },
      })
    }
  })
}

watch(
  () => chemicalStore.currentMenuParentId,
  (newVal, oldVal) => {
    if (newVal === 'ys00001' || newVal === 'ys00002') {
      clearEditState() //清除标注状态
      refFireWaterSource.value.showkdkfk()
      chemicalStore.currentMenuParentId = ''
    }
  },
  {
    immediate: true, // 立即执行
    deep: true, // 深度监听
  }
)

//获取企业图标
function queryMenuSsInfoList() {
  const params = {
    sslx: '消防设施',
    // jgId:sjszjgTywysbm.sjszjgTywysbm
  }
  queryMenuSsInfo(params).then((res: any) => {
    xfssData.value = res
  })
}

function closeClick(val: boolean) {
  showWater.value = val
}

onMounted(() => {
  queryMenuSsInfoList()
})
</script>

<style lang="less" scoped>
.fire-container {
  width: 100%;
  height: 100%;

  // background-color: hotpink;
  .fire-main {
    position: absolute;
    top: 112px;
    right: 10px;
    width: 240px;
    height: calc(100% - 122px);
    color: #fff;
    border: 1px solid #0d609c;
    background: rgba(1, 7, 17, 0.7);
    box-sizing: border-box;
    z-index: 10;
  }

  .infos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border-bottom: 1px solid grey;
    font-size: 18px;
    font-weight: 700;
    box-sizing: border-box;
    /deep/.el-icon {
      font-size: 20px;
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .fire-icon {
    width: 100%;
    height: 100%;

    .fire-icon-box {
      float: left;
      margin-top: 10px;
      box-sizing: border-box;
      cursor: pointer;
      .fire-icon-con {
        margin-left: 10px;
        border: 1px solid grey;
        padding: 10px;
        box-sizing: border-box;
        width: 105px;
        height: 105px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .watersource {
      position: absolute;
      top: 0px;
      left: -250px;
    }
  }
}
</style>
